import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { useSelector, useDispatch } from 'react-redux'
import { Grid, Typography, Avatar } from '@material-ui/core';
import { callGetNewsApi } from 'utils/networking';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        padding: "30px 20px 100px",
        background: "#000",
        [theme.breakpoints.up('md')]: {
            padding: "50px 20px 200px",
        },
    },
    profileTitle: {
        fontSize: "28px",
        fontWeight: "bold",
        flex: '0 0 auto',
        whiteSpace: 'nowrap',
        color: "#fff",
        marginBottom: "20px",
        [theme.breakpoints.up('md')]: {
            fontSize: "38px",
        },

    },
    profileBrief: {
        color: "#fff",
        fontSize: "18px",
        width: "100%",
        marginBottom: "10px",
        [theme.breakpoints.up('md')]: {
            fontSize: "22px",
        },
    },
    grid: {
        borderBottom: "5px solid #fff",
        paddingBottom: "20px",
        marginBottom: "20px",
    },
}));

function UserContent(props) {
    const { data, className, ...rest } = props;
    const classes = useStyles();
    const profileData = useSelector((state) => state.auth.profileData)

    const dispatch = useDispatch()
    const history = useHistory();

    const [playlists, setPlaylists] = useState([]);
    useEffect(() => {
        getServerPlaylistsProps()
    }, [])
    const getServerPlaylistsProps = async () => {
        if (!profileData || !profileData.id) {
            history.push(`signin`);
            return;
        }
        callGetNewsApi(`song/user_playlists?user_id=${profileData.id}&all=1`, dispatch, (data) => {
            console.log(data);
            setPlaylists(data);
        })
    }

    // console.log(profileData)

    return (
        <div className={clsx(classes.root)} >
            <div>
                <Typography variant="body2" color="textPrimary" className={clsx(classes.profileTitle)}>
                    USER STATS
                </Typography>

                <Grid container className={clsx(classes.grid)}>
                    <Grid item xs={12} sm={4} className={clsx(classes.profileBrief,)}>Streams: {profileData?.plays}</Grid>
                    <Grid item xs={12} sm={4} className={clsx(classes.profileBrief,)}>Total Playlist: {playlists.length} </Grid>
                    <Grid item xs={12} sm={4} className={clsx(classes.profileBrief,)}>Favorite Genre: {profileData?.genre}</Grid>
                </Grid>
            </div>
            <div>
                <Typography variant="body2" color="textPrimary" className={clsx(classes.profileTitle)}>
                    USER bio
                </Typography>
                <Typography variant="body2" color="textPrimary" className={clsx(classes.profileBrief,)}>
                    {profileData?.brief}
                </Typography>
            </div>
        </div>
    )
}

UserContent.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};

export default UserContent

